<template>
	<div>
		<p><span class="h1">如需删除作品或章节，请在意见反馈中提交申请。</span>
			<el-button class="h2" @click="createNove">创建作品</el-button>
		</p>
		<template>
			<el-table :data="books.filter(data => !search || data.bookName.toLowerCase().includes(search.toLowerCase()))" style="width: 100%">
				<el-table-column label="书号" prop="bookId" width="50%"></el-table-column>
				<el-table-column label="作品名称" prop="bookName"></el-table-column>
				<el-table-column label="作品字数" prop="count"></el-table-column>
				<el-table-column label="进度">
					<template slot-scope="scope">
					    <span v-if="scope.row.status == 1">连载</span>  
					    <span v-else>完结</span>
					</template>
				</el-table-column>
				<el-table-column label="最后更新时间" prop="updateTime"></el-table-column>
				<el-table-column align="right">
					<template slot="header" slot-scope="scope">
						<el-input v-model="search" size="mini" placeholder="输入关键字搜索" />
					</template>
					<template slot-scope="scope">
						<el-button size="middle" @click="handleEdit(scope.$index, scope.row)" class="h2">更新</el-button>
					</template>
				</el-table-column>
			</el-table>
		</template>
	</div>
</template>

<script>
	import $ from 'jquery'
	export default {
		data() {
			return {
				books:[],
				search: ''
			}
		},
		methods: {
			select:function(){
				var _this=this;
				$.ajax({
					url:"http://localhost/book/authorBook/" + sessionStorage.getItem("authorId"),
					type:"get",
					success:function(data){
						_this.books=data.data;
					}
				});
			},
			handleEdit(index, row) {
				this.$router.push("/author/novelinfo?bookId="+row.bookId)
				console.log(index, row);
			},
			createNove:function(){
				this.$router.push("/author/novelinfo")
			}
		},
		created() {
			this.select();
		}
	}
</script>

<style>
	.h1 {
		color: #A6A6B6;
		float: left;
	}
	.h2 {
		background-color: #52C29A;
		color: white;
		text-decoration: none;
		float: right;
	}
</style>
